<template>
  <nut-address
    v-model:visible="modelValue"
    :province="province"
    :city="city"
    :country="country"
    :town="town"
    @change="onChange"
    @close="close"
    custom-address-title="请选择所在地区"
    round
    close-btn-icon="close"
  ></nut-address>
</template>
<script lang="ts">
import { reactive, toRefs } from "vue";
export default {
  name: "yh_address",

  props: {
    modelValue: {
      default: false,
    },
    close: {
      default: function () {},
    },
  },
  setup(_props, { emit }) {
    const onChange = (cal) => {
      const name = address[cal.next];
      if (name.length < 1) {
        emit("update:modelValue", false);
      }
    };
    const address = reactive({
      province: [
        { id: 1, name: "北京" },
        { id: 2, name: "广西" },
        { id: 3, name: "江西" },
        { id: 4, name: "四川" },
      ],
      city: [
        { id: 7, name: "朝阳区" },
        { id: 8, name: "崇文区" },
        { id: 9, name: "昌平区" },
        { id: 6, name: "石景山区" },
      ],
      country: [
        { id: 3, name: "八里庄街道" },
        { id: 9, name: "北苑" },
        { id: 4, name: "常营乡" },
      ],
      town: [],
    });
    return {
      onChange,
      ...toRefs(address),
    };
  },
};
</script>
<style lang="scss">
</style>
